<template>
	<div class="box">
		<!-- 我蒙蔽辽？？这玩意都怎么找 怎么监听？ -->
		<!-- 既然我不能自动监听 那我就手动监听：全选反选 改变底部的字 -->
		<h2>vue购物清单</h2>
		<!-- @selection-change="handleSelectionChange" -->
		<!-- show-summary sum-text="总价" border -->
		 <el-table ref="multipleTable" :data="tableData" stripe >
		     <el-table-column width="55">
				 <template slot-scope="scope">
					  <input type="checkbox" v-model="scope.row.checked">
				 </template>
		     </el-table-column>
		     <el-table-column label="商品" width="200">
				  <template slot-scope="scope">
					  <img :src="scope.row.logo" alt="" width="80px">
					  <p>{{scope.row.name}}</p>
				  </template>
		     </el-table-column>
		     <el-table-column label="数量" width="100">
				 <template slot-scope="scope">
					  <button @click="reduces(scope.row)">-</button>
					  <input type="text" v-model="scope.row.count">
					  <button @click="add(scope.row)">+</button>
				 </template>
		     </el-table-column>
		     <el-table-column label="单价(元)" width="80">
				 <template slot-scope="scope">
						{{scope.row.price | suffix}}
				 </template>
		     </el-table-column>
		     <el-table-column label="金额(元)" width="80">
				 <template slot-scope="scope">
					{{scope.row.price*scope.row.count | suffix}}
				 </template>
		     </el-table-column>
		     <el-table-column label="操作" width="80">
				 <template slot-scope="scope">
					 <button @click="del">删除</button>
				 </template>
		     </el-table-column>
		 </el-table>
		<div class="goBuy">
			 <div>
				 <el-button @click="allSeclect" ref="allBtn">全选/不选</el-button>
				 <el-button @click="removeSelect">删除所选内容</el-button>
			 </div>
			 <div class="shop">
				 共选商品<span>{{state.checkeds.length}}</span>件
				 总计<span>{{state.tatalPrice | suffix}}</span>元
				 <el-button>去结算</el-button>
			 </div>
		</div>
	</div>
</template>

<script>
	const data=[
		{
			id:0,
			logo:require('./img/1.webp'),
			name:'鞋子',
			count:1,
			price:524
		},
		{
			id:1,
			logo:require('./img/2.webp'),
			name:'厨卫',
			count:1,
			price:355
		},
		{
			id:2,
			logo:require('./img/3.webp'),
			name:'口号',
			count:5,
			price:109
		},
	]
	export default {
		data() {
		  return {
			tableData: [],
			iNow:0,len:[],
		  }
		},
		filters:{
			suffix(v){
				let price=parseFloat(v)
				return '￥'+price.toFixed(2);
			}
		},
		computed:{
			state(){
				const checkeds=this.tableData.filter(item=>item.checked)
				const tatalPrice=checkeds.reduce((a,b)=>{
					return a+b.count*b.price
				},0)
				this.len=checkeds.length;
				return {
					checkeds,tatalPrice,
				}
			}
		},
		methods:{
			// 删除单个
			del(ev){
				// 不知道从哪找下标，id没试好，，，删除整行吧
				this.tableData.splice(ev.path[3],1)
			},
			// 删除所选
			removeSelect(){
				this.tableData=this.tableData.filter(item=>{
					if(!item.checked){
						return item;
					}
				})
			},
			// 全选按钮
			allSeclect(){
				// 蒙的 蒙对了
				if(this.len==this.tableData.length){
					this.iNow=1;
				}
				this.iNow++;
				for(let i=0;i<this.tableData.length;i++){
					if(this.iNow%2==1){
						this.tableData.[i].checked=true;
					}else{
						this.tableData.[i].checked=false;
					}
				}
			},
			// 减少按钮
			reduces(data){
				data.count--;
				if(data.count<0){
					data.count=0
					this.$message({
						message:'不买可以，别侮辱我，不让我过了?',
						type:'info',
					})
				}
			},
			// 增加按钮
			add(data){
				data.count++;
				if(data.count>=5){
					data.count=5
					this.$message({
						message:'别TMD买了，家里趁啥啊?一会倾家荡产了',
						type:'info',
					})
				}
			}
		},
		mounted() {
			// 到现在我都不知道fetch是个啥 写完去百度
			window.fetch("/").then(()=>{
				// 往tableData里加数据
				this.tableData=data.map((item)=>{
					// 还是把所有东西 和 状态扔出去
					item.checked=false;
					return item;
				})
			})
		}
	}
</script>

<style>
	.box{
		width: 595px;
		margin: 0 auto;
		/* text-align: center; */
	}
	.cell{
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.goBuy{
		width: 100%;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}
	img{
		margin-right: 10px;
	}
	input{
		width: 30px;
	}
	.shop>span{
		color: red;
	}
</style>
